{template 'app_common/header'}

<link rel="stylesheet" href="{KB_WEB_BACK_JS}/lightbox/css/lightbox.css"/>
<link rel="stylesheet" href="{KB_APP_JS}/weui/weui.min.css"/>

<script>
    document.title = '工单详情';
</script>

<style>
    .weui-cell{
        margin-top: 0.24rem;
        padding: 0!important;
    }
    .weui-cell:before{
        border:none;
    }
    .weui-uploader__input-box{
        border: none;
        background-image: url("{KB_APP_IMG}/phone.png");
        background-size: 100% 100%;
    }
    .weui-uploader__input-box:before{
        width: 0;
        height: 0;
    }
    .weui-uploader__input-box:after{
        width: 0;
        height: 0;
    }
    .weui-uploader__files li {
        border-radius: 5px;
        overflow: hidden;
    }
    .g-scrollview:after{
        height:0;
    }
    .js_counter{
        float: right;
        color: #999;
        padding-right: 0.2rem;
    }
    body>span{display: none}
    .dialogue ul li .question .r{border: none;}
</style>

<body>

<section class="g-flexview">
    <div class="g-scrollview">
        <div class="m-celltitle" style="margin-top: 0.2rem">问题所属分类</div>
        <div class="currentClass" style="height: auto">
            <div>{$detail['cat_name']}</div>
            {if $detail['child_cat_id'] != 0}
            <div><span>——</span>{$detail['child_cat_name']}</div>
            {/if}
        </div>
        <div class="m-celltitle" style="margin-top: 0.2rem">当前状态</div>
        <div class="dialogue">
            <ul>
                {loop $order_list $index $item}
                <li>
                    {if $item['is_reply'] == 0}
                    <div class="question">
                        <div class="l">
                            <img src="{$item['avatar']}" alt="">
                        </div>
                        <div class="r">
                            <div>{$item['nickname']}：</div>
                            <div class="content">{$item['content']}</div>
                            {if $item['pic']}
                            <div class="clear">
                                {loop $item['pic'] $index $pic}
                                <a href="{php echo tomedia($pic)}" data-lightbox="roadtrip{$item['order_id']}">
                                <img src="{php echo tomedia($pic)}" style="width: 1.2rem;height: 1.2rem;margin-right: .2rem; margin-top: .2rem; float: left;border-radius: 5px;" />
                                </a>
                                {/loop}
                            </div>
                            {/if}
                            <div class="time">创建时间：{$item['add_time']}</div>
                        </div>
                    </div>
                    {/if}
                    {if $item['is_reply'] == 1}
                    <div class="answer">
                        <div class="l">回复：</div>
                        <div class="c">
                            <img src="{$item['avatar']}" alt="">
                        </div>
                        <div class="r">
                            <div>{$item['nickname']}：</div>
                            <div class="content">{$item['content']}</div>
                            <div class="time">创建时间：{$item['add_time']}</div>
                        </div>
                    </div>
                    {/if}
                </li>
                {/loop}
            </ul>
        </div>

        <!-- 反馈内容 -->
        <div id="feedback" style="display: none;margin-bottom: 1.8rem">
            <div class="m-celltitle" style="margin-top: 0.2rem"></div>
            <div class="m-cell changecell">
                <div class="cell-item">
                    <div class="cell-right">
                        <textarea class="cell-textarea" id="edit_textarea" maxlength="800" name="edit_textarea" placeholder="请在800字内描述您的疑问，我们将尽快地解答，稍后将有微信消息通知您解答结果~"></textarea>
                    </div>
                </div>
            </div>
            <div class="scPic" style="padding-right: 0; padding-left: .3rem">
                <div class="filebox clear">
                    <!--weui图片上传-->
                    <div class="weui-gallery" id="gallery">
                        <span class="weui-gallery__img" id="galleryImg"></span>
                        <div class="weui-gallery__opr">
                            <a href="javascript:" class="weui-gallery__del">
                                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                            </a>
                        </div>
                    </div>

                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <div class="weui-uploader">
                                <div class="weui-uploader__bd">
                                    <ul class="weui-uploader__files" id="uploaderFiles">

                                    </ul>
                                    <div class="weui-uploader__input-box">
                                        <input class="weui-uploader__input uploaderInput" type="file" accept="image/*" multiple="multiple" {if $device_type == 'android'}capture="camera"{/if}/>
                                    </div>
                                </div>
                                <div class="js_counter"><span class="countNowPic"></span>/<span class="allowMaxPic"></span></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 反馈内容 -->
    </div>
    {if $detail['customer_status'] == 2}
    <div class="creatGd" id="state_1">
        <div style="display: flex;" data-id="{$detail['order_id']}">
            <button type="button" class="btn-block btn-primary" id="submitBtn" style="margin-right: 10px; margin-top: 0;padding: 0;">已解决</button>
            <input type="button" class="btn-block btn-hollow" value="未解决" id="not_solve"  style="margin-top: 0"/>
        </div>
        {template 'app_common/footer'}
    </div>
    {else if $detail['customer_status'] == 3 && ($detail['unsolved_status'] == 1 || $detail['unsolved_status'] == 0)}
    <div class="creatGd" id="state_3">
        <div style="display: flex;">
            <button type="button" class="btn-block btn-primary" id="editBtn" style="margin-right: 10px; margin-top: 0;padding: 0">修改</button>
            <input type="button" class="btn-block btn-hollow" value="返回" style=" margin-top: 0" onclick="window.location.href='{php echo $this->createMobileUrl('index', array('act' => 'index'))}'"/>
        </div>
        {template 'app_common/footer'}
    </div>
    {/if}

    <!--修改反馈/添加反馈的提交-->
    <div class="creatGd" id="state_2" style="display: none">
        <div style="display: flex;">
            <button type="button" class="btn-block btn-primary" id="edit_confirmBtn" data-id="" style="margin-right: 10px; margin-top: 0;padding: 0;display: none;">提交</button>
            <button type="button" class="btn-block btn-primary" id="confirmBtn" style="margin-right: 10px; margin-top: 0;padding: 0;display: none;">提交</button>
            <input type="button" class="btn-block btn-hollow" value="取消"  id="exit" style=" margin-top: 0"/>
        </div>
        {template 'app_common/footer'}
    </div>
</section>

<script src="{KB_APP_JS}/jquery-3.2.1.min.js"></script>

<script src="{KB_APP_JS}/ydui.flexible.js"></script>
<script src="{KB_APP_JS}/ydui.js"></script>
<script src="{KB_WEB_BACK_JS}/lightbox/js/lightbox.js"></script>
<script>
    lightbox.option({'alwaysShowNavOnTouchDevices' : true});
</script>

<script>
    countNowPic = $('#uploaderFiles li').length;
    $('.countNowPic').text(countNowPic);
    // 最大上传图片数量
    maxCount = 9;
    if (countNowPic >= maxCount) {
        $('.weui-uploader__input-box').css('display', 'none');
    }
    $('.allowMaxPic').text(maxCount);

    //weui多图上传
    $(function(){
        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        // 最大4M
        var maxSize = 1024 * 1024 * 4;

        var $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
            $uploaderInput = $(".uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");

        $uploaderInput.on("change", function(e){
            var files = e.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                window.YDUI.dialog.notify('没有选中文件', 1000);return;
            }

            for (var i = 0, len = files.length; i < len; i++) {
                var file = files[i];
                fileType = file.type;
                var reader = new FileReader();

                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                    window.YDUI.dialog.notify('该类型不允许上传', 1000);
                    return;
                }
                if (file.size > maxSize) {
                    window.YDUI.dialog.notify('上传图片不能超过4M，请重新选择', 1000);
                    return;
                }

                reader.onload = function (f) {
                    var img = new Image();
                    img.onload = function (i) {
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = img.width;
                        canvas.height = img.height;
                        var opt = (file.size > 1024 * 1024) ? 0.65 : 0.92;
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        var base64  = canvas.toDataURL(fileType, opt);

                        // 插入到预览区
                        var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(' + base64  + ')"><div class="weui-uploader__file-content">0%</div><input type="hidden" value="'+base64+'"></li>');
                        $uploaderFiles.append($preview);

                        var num = $uploaderFiles.find('li').length;
                        $('.countNowPic').text(num);//当前有几张图片
                        if (num == maxCount) {
                            $('.weui-uploader__input-box').css('display', 'none');
                        }
                        if (num > maxCount) {
                            window.YDUI.dialog.notify('最多只能上传'+maxCount+'张图片', 1000);
                        }

                        var progress = 0;
                        function uploading() {
                            $preview.find('.weui-uploader__file-content').text(++progress + '%');
                            if (progress < 100) {
                                setTimeout(uploading, 20);
                            } else {
                                $preview.removeClass('weui-uploader__file_status').find('.weui-uploader__file-content').remove();
                            }
                        }
                        setTimeout(uploading, 20);
                    };
                    img.src = f.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
        var index; //第几张图片
        $uploaderFiles.on("click", "li", function(){
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function(){
            $gallery.fadeOut(100);
        });
        //删除图片
        $(".weui-gallery__del").click(function() {
            if ($uploaderFiles.find("li").eq(index).find('input').attr('data-input') === '1') {
                //删除图片的物理路径
                var pic_path = $uploaderFiles.find('li').eq(index).find('input').val();
                var order_id = $('#edit_confirmBtn').attr('data-id');
                $.post("{php echo $this->createMobileUrl('order', array('act' => 'delPic'))}", {order_id: order_id, pic: pic_path}, function (data) {
                    if (data.code !== 200) {
                        return false;
                    }
                });
            }
            $('.countNowPic').text($uploaderFiles.find('li').length - 1);
            $uploaderFiles.find("li").eq(index).remove();
            if ($uploaderFiles.find('li').length < maxCount) {
                $('.weui-uploader__input-box').css('display', 'block');
            }
        });
    });
</script>

<script>
    $(function () {
        window.document.getElementById('edit_textarea').focus();

        var deviceH = document.documentElement.clientHeight+"px";
        $("body").attr("style","width:100%;height:"+deviceH+";");
    });

    //点击修改
    $('#editBtn').on('click', function () {
        $.post("{php echo $this->createMobileUrl('order', array('act' => 'get_reply_data'))}", {order_id: "{$detail['order_id']}"}, function (res) {
            if (res.code == 200) {
                $('#edit_confirmBtn').attr('data-id', res.data.reply_order_id);
                $('#edit_textarea').val(res.data.reply_content);
                if (res.data.reply_pic.length != 0) {
                    var html = '';
                    $.each(res.data.reply_pic, function (index, el) {
                        html += '<li class="weui-uploader__file" style="background-image:url('+el.reply_pic_tomedia+')"><input type="hidden" value="'+el.reply_pic+'" data-input="1"></li>';
                    });
                    $('#uploaderFiles').append(html);
                }
            } else {
                YDUI.dialog.notify('找不到数据', 1000);
                return false;
            }
        });

        $('#state_3').hide();//修改按钮隐藏
        $('#state_2').show();
        $('#edit_confirmBtn').show();//显示提交按钮
        $('#feedback .m-celltitle').text('修改反馈');
        $('#feedback').show();
        $('.dialogue').css('margin','0');

        //焦点在文字的最右边
        $('#edit_textarea').focus();
        var t = $('#edit_textarea').val();
        $('#edit_textarea').val('');
        $('#edit_textarea').val(t);
    });

    //点击已解决
    $('#submitBtn').on('click', function () {
        YDUI.dialog.confirm('您确认我们的回复已经解决您的问题了吗？', function () {
            $.get("{php echo $this->createMobileUrl('order', array('act' => 'resolved', 'order_id' => $detail['order_id']))}", function (data) {
                YDUI.dialog.notify(data.msg, 1000);
                if (data.code === 200) {
                    setTimeout(function () {
                        window.location.href = "{php echo $this->createMobileUrl('index', array('act' => 'index'))}";
                    }, 1000)
                } else {
                    return false;
                }
            });
        });
    });

    //点击未解决
    $('#not_solve').on('click', function () {
        YDUI.dialog.confirm("看来我们的回复并没有解决您的疑问，<br>我们将继续跟进这个工单，继续对您做出回复~<br>您看是否需要重新描述一下问题呢？", [
            {
                txt: '再次反馈',
                color: true,
                callback: function () {
                    $('#state_1').hide();
                    $('#state_2').show();
                    $('#confirmBtn').show();//显示提交按钮
                    $('#feedback .m-celltitle').text('再次反馈');
                    $('#feedback').show();
                    $('.dialogue').css('margin','0');
                    $('#edit_textarea').focus();
                }
            },
            {
                txt: '不做更改',
                color: false, /* false:黑色  true:绿色 或 使用颜色值 */
                callback: function () {
                    $.get("{php echo $this->createMobileUrl('order', array('act' => 'unresolved', 'order_id' => $detail['order_id']))}", function (data) {
                        if (data.code === 200) {
                            window.location.reload();
                        } else {
                            YDUI.dialog.notify(data.msg, 1000);
                            return false;
                        }
                    });
                }
            }
        ]);
    });

    var flag = true;
    //再次反馈 点击提交
    $('body').on('click','#confirmBtn',function(){
        if (flag === false) {
            YDUI.dialog.notify('您的操作太频繁了', 1000);
            return false;
        }
        var textarea=$('textarea[name=edit_textarea]').val();
        if(textarea === ''){
            YDUI.dialog.notify('请输入反馈', 1000);
            return false;
        }
        var order_id = "{$detail['order_id']}";
        if ($('.countNowPic').text() > maxCount) {
            window.YDUI.dialog.notify('最多只能上传'+maxCount+'张图片', 1000);
            return false;
        }
        var pic = [];
        $('#uploaderFiles li input').each(function (index, el) {
            pic.push($(el).val());
        });
        $.post("{php echo $this->createMobileUrl('order', array('act' => 'feedback'))}", {order_id: order_id, content: textarea,pic: pic}, function (data) {
            flag = false;
            YDUI.dialog.notify(data.msg, 1000);
            if (data.code === 200) {
                setTimeout(function () {
                    window.location.reload();
                }, 1300)
            } else {
                return false;
            }
        });
    });

    //修改 点击提交
    $('body').on('click', '#edit_confirmBtn', function () {
        if (flag === false) {
            YDUI.dialog.notify('您的操作太频繁了', 1000);
            return false;
        }
        var textarea = $('textarea[name=edit_textarea]').val(),
            order_id = $(this).attr('data-id');
        if(textarea === ''){
            YDUI.dialog.notify('请输入反馈', 1000);
            return false;
        }
        if ($('.countNowPic').text() > maxCount) {
            window.YDUI.dialog.notify('最多只能上传'+maxCount+'张图片', 1000);
            return false;
        }
        var pic = [];
        $('#uploaderFiles li input').each(function (index, el) {
            pic.push($(el).val());
        });
        var data = {
            order_id: order_id,
            content: textarea,
            pic: pic
        };
        $.post("{php echo $this->createMobileUrl('order', array('act' => 'editFeedback'))}", data, function (res) {
            flag = false;
            YDUI.dialog.notify(res.msg, 1000);
            if (res.code === 200) {
                setTimeout(function () {
                    window.location.reload();
                }, 1000)
            } else {
                return false;
            }
        });
    });

    //点击取消
    $('body').on('click','#exit',function(){
        $('#state_2').hide();
        $('#state_3').show();
        $('#state_1').show();
        $('#feedback').hide();
        $('#edit_feedback').hide();
        $('.dialogue').css('margin-bottom','1.8rem');
    })

</script>
</body>
</html>